<template>
  <div class="app-container">
     <!-- 搜索栏目 -->
    <div class="filter-container add1">
      <el-form :inline="true" :model="formQuery" class="demo-form-inline">
<!--        <el-form-item label="标题">-->
<!--          <el-input v-model="formQuery.title" placeholder="标题"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item>-->
<!--          <el-button type="primary" icon="el-icon-search" @click="_search">-->
<!--              搜索-->
<!--          </el-button>-->
<!--        </el-form-item>-->
        <el-form-item>
          <el-button type="primary" icon="el-icon-circle-plus el-icon--right" @click="_addFiles">
             添加
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table class="tabless" :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit
              highlight-current-row :row-class-name="tableRowClassName" @sort-change='sortChange' @selection-change="handleSelectionChange">

      <el-table-column align="center" label="序号" width="80" fixed>
        <template slot-scope="scope">
          <span v-text="getIndex(scope.$index)"> </span>
        </template>
      </el-table-column>
      <!-- 表格主要列名称 -->
      <!-- 添加排序sortable='custom' sortable='customsss' -->
      <el-table-column align="center" prop="filename" label="附件名字"  width="auto"></el-table-column>
      <el-table-column align="center" prop="filepath" label="附件地址" width="auto"   ></el-table-column>
      <el-table-column align="center" prop="createdate" :formatter="_dateFormat" label="创建日期" width="200px" ></el-table-column>
      <el-table-column align="center" prop="topicname" label="专题领域名字" width="200px" ></el-table-column>
      <el-table-column align="center" prop="topicid" label="专题领域id" width="200px"  ></el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="deleteItem(scope.row,scope.$index)" type="danger" >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 以上为主界面内容 -->
    <el-pagination
      @size-change="_handleSizeChange"
      @current-change="_handleCurrentChange"
      :current-page="listQuery.pageNum"
      :page-size="listQuery.pageRow"
      :total="totalCount"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      class="pagination">
    </el-pagination>
    <add-item ref="addForm" @ok="_asynsGetTableData"></add-item>
  </div>
</template>
<script>
  import AddItem from './additem.vue';
  export default {
    components:{
      AddItem
    },
    name: 'tpl',
    data() {
      return {
        formQuery:{
          title:'',
          author:'',
          abstract:'',
        },
        list: [],//表格的数据
        listLoading: false,//数据加载等待动画
        totalCount:0,
        listQuery: {
          pageNum: 1,//页码
          pageRow: 10,//每页条数
        },
      }
    },
    mounted() {
      this._asynsGetTableData();
    },
    methods: {
      getIndex($index) {
        //表格序号
        return (this.listQuery.pageNum - 1) * this.listQuery.pageRow + $index + 1
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex % 2 === 1) {
          return 'warning-row';
        } else if (rowIndex % 2 === 0) {
          // return 'success-row';
        }
        return '';
      },
      deleteItem(item,index){
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.api({
            url: "/file/deleteFileById",
            method: "post",
            headers:{
              'content-type':'application/x-www-form-urlencoded'
            },
            data:this.$qs.stringify({
              id:item.id
            })
          }).then(data => {
            this.list.splice(index,1);
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      sortChange(){

      },
      handleSelectionChange(){

      },
      _dateFormat(row, column, cellValue, index){
          return new Date(cellValue).Format('yyyy-MM-dd');
      },
      _handleSizeChange(val){
         this.listQuery.pageRow = val;
         this._asynsGetTableData()
      },
      _handleCurrentChange(val){

         this.listQuery.pageNum = val;
         console.log(this.listQuery)
         this._asynsGetTableData()
      },
      _search(){
         // 重制页面申请条件listQuery
         this.listQuery = { pageNum: 1,pageRow: 10};
         this._asynsGetTableData();
      },
      _asynsGetTableData(){
         this.listLoading = true;
         this.api({
                    url: "/file/listFile",
                    method: "post",
                    headers:{
                      'content-type':'application/x-www-form-urlencoded'
                    },
                    data:this.$qs.stringify({
                      ...this.listQuery,
                      ...this.formQuery
                    })
            }).then(data => {
                this.listLoading = false;
                this.list = data.list;
                this.totalCount = data.totalCount;
            })
      },
      _addFiles(){
          this.$refs.addForm.show();
      }
    },
  }
</script>

<style lang="scss" scoped>
    .app-container{
      padding: 20px;
    }
</style>
<style>
  .el-table .warning-row {
    background:whitesmoke;

    /* background: #ffffff; */
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  .pagination{
    background-color:lavender;
    margin-right: 0%;
    text-align: right;
  }

  .searchWord .add1{
    display: inline;
  }

  #btn{
    /* padding: 5px 10px;
    background: #00b0f0;
    color: #FFF;
    border: none;
    border-radius: 5px; */
  }


</style>
